<template>
    <div class="Shop">
        <div class="ShopView" :style="{'padding-top':list.Upper +'px','padding-right':list.Right+'px','padding-bottom':list.Lower+'px','padding-left':list.Left+'px',background:list.BgColor}">
            <div class="ShopItem" :style="{'border-radius': list.Style == 'Two'?'8px':'0'}">
                <div class="ShopTop">
                    <div>
                        <div class="ShopTitle">奢匠全屋定制</div>
                        <div class="ShopTopLeft">
                            <div class="ShopTopLeftNum" style="color: #FF4D5D;margin-right: 12px;display: flex;align-items: center;">
                                <img src="https://manager.ryz1620.com/static/adminShop/iconHeart.png">
                                <span>1690关注</span>
                            </div>
                            <div>营业时间：09:00-18:00</div>
                        </div>
                        <div class="ShopBottom">
                            <img src="@/assets/Heart.png">
                            <span>关注</span>
                        </div>
                    </div>
                    <div class="ShopLoGo">
                        LOGO
                    </div>
                </div>
                <div class="ShopMessage">
                    <span>品牌简介：瓷砖品牌诞生于1996年，是国内最大的建筑陶瓷制造商和销售商之一。以“为中国陶瓷打造出第一个世界知名...</span>
                    <i class="el-icon-arrow-down"></i>
                </div>
            </div>
        </div>
    </div>

</template>

<script>
    export default {
        name: 'Shop',
        props: ['data'],
        data() {
            return {
                list: {}
            }
        },

        mounted() {
            this.list = this.data
        }
    }
</script>

<style lang="less" scoped>
    .Shop {
        .ShopView {
            /* padding: 18px; */
            border-bottom: 1px solid #f5f5f5;

            .ShopItem {
                box-shadow: 0px 2px 7px 0px #F1F1F1;
                /* border-radius: 8px; */
                padding: 16px;
                background: #FFFFFF;

                .ShopTop {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    margin-bottom: 16px;

                    .ShopTitle {
                        font-size: 19px;
                        font-weight: bold;
                        color: #212121;
                    }

                    .ShopTopLeft {
                        margin: 10px 0;
                        font-size: 11px;
                        font-weight: 500;
                        color: #7D7D7D;
                        display: flex;
                        align-items: center;

                        img {
                            width: 18px;
                            height: 18px;
                            margin-right: 4px;
                        }
                    }

                    .ShopBottom {
                        padding: 5px 11px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        max-width: max-content;
                        background: linear-gradient(90deg, #F1DFB9, rgba(230, 194, 129, 0.99));
                        border-radius: 20px;
                        font-size: 12px;
                        font-weight: 500;
                        color: #212121;

                        img {
                            width: 16px;
                            height: 16px;
                            margin-right: 6px;
                        }
                    }

                    .ShopLoGo {
                        width: 72px;
                        height: 72px;
                        background: #141213;
                        border-radius: 8px;
                        color: #fff;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        font-size: 20px;
                    }
                }

                .ShopMessage {
                    font-size: 10px;
                    font-weight: 500;
                    color: #9A9A9A;
                }
            }
        }
    }
</style>